<template>
  <div class="container">
    <el-header height="120px">
      <el-card class="container-card">
        <el-row type="flex">
          <el-col
            v-for="(item, index) in header_message"
            :key="index"
            class="container-card-col"
          >
            <div class="card-left">
              <div class="art-number">{{ item.number }}</div>
              <div class="art-desc">{{ item.title }}</div>
            </div>
            <div class="card-right">
              <i :class="item.icon"></i>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-header>

    <!-- 主体 -->
    <el-main class="main-first">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-card class="left" id="firstmain-chart-left"> </el-card>
        </el-col>

        <el-card class="right" id="firstmain-chart-right"> </el-card>
      </el-row>
    </el-main>

    <!-- 底部 -->
    <el-footer>
      <el-card>
        <div>改内容由xxx进行开发</div>
      </el-card>
    </el-footer>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import { BarChart } from 'echarts/charts'
// import {
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   DatasetComponent,
//   TransformComponent
// } from 'echarts/components'
// import { LabelLayout, UniversalTransition } from 'echarts/features'
// import { CanvasRenderer } from 'echarts/renderers'
// echarts.use([
//   TitleComponent,
//   TooltipComponent,
//   GridComponent,
//   DatasetComponent,
//   TransformComponent,
//   BarChart,
//   LabelLayout,
//   UniversalTransition,
//   CanvasRenderer
// ])
export default {
  name: 'homeIndex',
  data () {
    return {
      header_message: [
        {
          title: '文章总数',
          number: '10040',
          icon: 'el-icon-document-copy'
        },
        {
          title: '日新增文章数',
          number: '1056',
          icon: 'el-icon-document'
        },
        {
          title: '评论总数',
          number: '11148',
          icon: 'el-icon-chat-line-square'
        },
        {
          title: '日新增评论数',
          number: '420',
          icon: 'el-icon-chat-dot-round'
        }
      ]
    }
  },
  mounted () {
    this.myChart()
  },
  methods: {
    myChart () {
      const myChart = echarts.init(
        document.querySelector('#firstmain-chart-left')
      )
      myChart.setOption({
        title: {
          text: '月新增文章数'
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: ['20%', '20%'],
          data: [
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13',
            '2022.4.13'
          ],
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            margin: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [126, 250, 180, 125, 190, 125, 160, 40, 10, 10],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              colorStops: [
                {
                  offset: 0,
                  color: '#9DECE1'
                },
                {
                  offset: 1,
                  color: '#646EEB'
                }
              ]
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x1: 1,
                y1: 0,

                colorStops: [
                  {
                    offset: 0,
                    color: '#9DECE1' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,.8 )' // 100% 处的颜色
                  }
                ],
                global: false
              }
            },
            lineStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: '#9DECE1'
                  },
                  {
                    offset: 1,
                    color: '#646EEB'
                  }
                ]
              }
            }
          }
        ]
      })

      // 右侧盒子
      const right = echarts.init(
        document.querySelector('#firstmain-chart-right')
      )
      right.setOption({
        tooltip: {
          // 开启提示框
          trigger: 'item',
          // 鼠标悬停，提示框不被遮挡
          confine: true
        },
        toolbox: {
          show: true,
          trigger: 'item',
          feature: {
            dataView: { readOnly: true },
            magicType: { type: ['line', 'bar'] }
          },
          bottom: 0,
          left: 'center'
        },

        legend: {
          bottom: 150,
          left: 'center',
          data: ['奇趣事', '/n', '会生活', '/n', '爱旅行', '/n', '趣美味']
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '30%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              normal: {
                position: 'inner',
                show: false
              }
            },

            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '奇趣事' },
              { value: 30, name: '会生活' },
              { value: 20, name: '爱旅行' },
              { value: 10, name: '趣美味' }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {

  .el-header {
    padding: 0;

    .container-card {
      height: 120px;

      .container-card-col {
        height: 80px;
        padding: 12px 40px;
        border-right: 1px solid #d7dbec;
        display: flex;
        justify-content: space-between;

        .card-left {
          .art-number {
            font-size: 25px;
            color: #131523;
          }
          .art-desc {
            font-size: 14px;
            color: #5a607f;
          }
        }

        .card-right {
          width: 56px;
          height: 56px;
          background: #ecf2fe;
          opacity: 0.6;
          border-radius: 50%;
          text-align: center;
          line-height: 56px;
          font-size: 24px;
          color: #266cff;
        }
      }
    }
  }

  .main-first {
    padding: 30px 0 0;

    .el-row {
      .left {
        flex: 1;
        margin-right: 30px;
        height: 418px;
        padding: 28px 30px;
      }
      .right {
        width: 256px;
        height: 418px;
      }
    }
  }

  .el-footer {
    padding: 30px 0 0;
    text-align: center;
  }
}
</style>
